<template>
  <div class="navigation-container" >
    <div class="logo" style="color: white">
        <img src="../assets/ECNUwhite.png" alt="logo" class="logo-img">
       <h5>华东师范奖学金评估系统</h5>
    </div>
        <div class="user" style="color: white">
            <img src="../assets/kitty.jpg" alt="头像" class="avatar">
            <p class="username">欢迎你,{{username}}老师</p >
        </div>
    </div>


</template>

<script>
export default {
  name: 'navigation',
  data () {
    return {
      activeIndex: '5',
      username: '杨静'
    }
  },
  methods: {
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.navigation-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #8B2323; /* 根据你的设计进行调整 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 1000;
  padding: 10px 20px;
  
}

.logo {
  font-size: 30px;
  color: darkblue;
  font-family: 'Courier New', Courier, monospace;
  font-weight: bolder;
  display: flex;
  align-items: center;
}

/* 响应式设计，用于调整搜索框和按钮的大小 */
@media (max-width: 500px) {
 
}
.avatar{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-left: 20px;
    cursor: pointer;
    border: 1px solid #AAA;
}
.username{
    margin-left: 20px;
	margin-right: 50px;
    font-size: 16px;
    font-weight: bold;
}
.user{
    width:40%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.logo-img{
    width: 80px;
    height: 50px;
    margin-top: 0px;
}
</style>